<template>
	<view class="container">
		<uni-forms :modelValue="valiFormData" :label-width="100" ref="from" :rules="rules">
			<uni-forms-item label="人脸信息" required name="title">
				<!-- <image v-if="faceInfo.face_photo_url" :src="faceInfo.face_photo_url" mode="" style="width: 100rpx;height: 100rpx;"></image> -->
				<up-tag v-if="faceInfo.face_photo_url" type="primary" plain >已录入</up-tag>
				<!-- v-else -->
				<!-- <span @click="goFaceInfo">请在"我的"-"人脸信息"录入</span> -->
				<up-tag v-else plain size="mini">请在"我的"-"人脸信息"录入</up-tag>
			</uni-forms-item>
			<uni-forms-item label="姓名" required name="name">
				<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="性别" required name="gender">
				<uni-data-select v-model="valiFormData.gender" :localdata="sexData"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="联系方式" required name="phone">
				<uni-easyinput v-model="valiFormData.phone" placeholder="请输入联系方式" />
			</uni-forms-item>
			<uni-forms-item label="来访单位" required name="visitor_company">
				<uni-easyinput v-model="valiFormData.visitor_company" placeholder="请输入来访单位" />
			</uni-forms-item>
			<uni-forms-item label="来访人数" required name="visitor_count">
				<uni-easyinput v-model="valiFormData.visitor_count" placeholder="请输入来访人数" />
			</uni-forms-item>
			<uni-forms-item label="受访单位" required name="visit_company">
				<uni-easyinput v-model="valiFormData.visit_company" placeholder="请输入受访单位" />
			</uni-forms-item>
			<uni-forms-item label="受访人名" required name="visit_person">
				<uni-easyinput v-model="valiFormData.visit_person" placeholder="请输入受访人名" />
			</uni-forms-item>
			<uni-forms-item label="入园日期" required name="visit_date">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="valiFormData.visit_date" />
			</uni-forms-item>
			<uni-forms-item label="事由" required name="reason">
				<uni-easyinput type="textarea" v-model="valiFormData.reason" placeholder="请输入事由" />
			</uni-forms-item>
		</uni-forms>
		<view class="button">
			<button @click="submitForm">提交</button>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import {
		Createvisitor
	} from '../../api/reportedMaintenance.js';
	import { getFaceInfo } from '@/api/faceinfo.js';
	export default {
		data() {
			return {
				show: false,
				urlImg: '',
				faceInfo: {},
				valiFormData: {
					reason: '',
					gender: '',
					name: '',
					phone: '',
					visitor_company: '',
					visitor_count: '',
					visit_company: '',
					visit_person: '',
					visit_date: '',
				},
				sexData: [{
						value: '1',
						text: '男'
					},
					{
						value: '2',
						text: '女'
					}
				],
				parkData: [],
				imageFileList: [],
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请填写姓名',
						}, ]
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '请选择性别',
						}, ]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请填写联系方式',
						}, ]
					},
					visitor_company: {
						rules: [{
							required: true,
							errorMessage: '请填写来访单位',
						}, ]
					},
					visitor_count: {
						rules: [{
							required: true,
							errorMessage: '请填写来访人数',
						}, ]
					},
					visit_company: {
						rules: [{
							required: true,
							errorMessage: '请填写受访单位',
						}, ]
					},
					visit_person: {
						rules: [{
							required: true,
							errorMessage: '请填写受访人名'
						}]
					},
					visit_date: {
						rules: [{
							required: true,
							errorMessage: '请选择入园日期'
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '请填写来访事由'
						}]
					}
				}
			};
		},
		created() {
			this.getFaceinfos();
		},
		methods: {
			async getFaceinfos() {
				try {
					const res = await getFaceInfo();
					if (res.code === 2000) {
						this.faceInfo = res.data;
					}
				} catch (error) {
					console.log(error);
				}
			},
			submitForm() {
				this.$refs.from.validate().then(res => {
					Createvisitor(this.valiFormData).then((res) => {
						if (res.code == 2000) {
							this.$refs.uToastRef.show({
								type: 'success',
								icon: false,
								message: "申请提交成功",
							})
							setTimeout(() => {
								uni.navigateBack({
									url: './index'
								})
							}, 2000)
						}else{
							this.$refs.uToastRef.show({
								type: 'error',
								icon: false,
								message: res.msg
							})
						}
					})

				})
			},
			goFaceInfo() {
				uni.navigateTo({
					url: '/pages/faceinfo/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 25rpx;
		height: 100vh;
	}

	.button {
		display: flex;
		justify-content: center;
		padding-bottom: 40rpx;

		button {
			width: 40%;
			background-color: #ff6e3d;
			border: none;
			padding: 20rpx;
			border-radius: 50rpx;
			color: #fff;
		}

	}
	:deep(.uni-forms-item:nth-of-type(1) .uni-forms-item__content) {
		flex: none;
		display: flex;
		align-items: center;
	}
</style>